<template>
	<view class="padding-tb">
		<view class="g-goBack" @click="$utils.toBack()">
			<view class="cuIcon-back"></view>
		</view>
		<view class="module">
			<view class="title">
				<text>首页应用</text>
				<view class="btn" v-if="!isEdit" @click="isEdit=true">编辑</view>
				<view class="btn" v-else @click="isEdit=false">保存</view>
			</view>
			<view class="content">
				<!-- 固定选项 -->
				<!-- <view class="item">
					<view class="img-bg" @click="$utils.toURL('/device/index')">
						<image class="big" src="/static/ico/ico-device.png" mode="aspectFit"></image>
					</view>
					<view class="txt">设备概览</view>
				</view> -->
				<!-- 可选项 -->
				<block v-for="(indexFn,ai) in appList" :key="indexFn.id">
					<block v-for="(item,index) in indexFn.arrays" :key="item.url">
						<view class="item" v-if="item.homeShow==1">
							<block v-if="isEdit">
								<view class="img-bg" @click="btnChangeItem(item.id,2)">
									<image class="big" :src="httpDomain+item.iconImg" mode="aspectFit"></image>
									<image class="small" src="/static/ico/icon-del.png" mode="aspectFit"></image>
								</view>
								<view class="txt">{{item.name}}</view>
							</block>
							<block v-else>
								<view class="img-bg" @click="$utils.toURL(item.url)">
									<image class="big" :src="httpDomain+item.iconImg" mode="aspectFit"></image>
								</view>
								<view class="txt">{{item.name}}</view>
							</block>
						</view>
					</block>
				</block>
			</view>
		</view>
		<view class="module" v-for="(item1,index1) in appList" :key="item1.id">
			<view class="title">{{item1.title}}</view>
			<view class="content">
				<block v-for="(item2,index2) in item1.arrays" :key="item2.url" >
					<view class="item" v-if="item2.homeShow==2">
						<block v-if="isEdit">
							<view class="img-bg" @click="btnChangeItem(item2.id,1)">
								<image class="big" :src="httpDomain+item2.iconImg" mode="aspectFit"></image>
								<image class="small" src="/static/ico/icon-add.png" mode="aspectFit"></image>
							</view>
							<view class="txt">{{item2.name}}</view>
						</block>
						<block v-else>
							<view class="img-bg" @click="$utils.toURL(item2.url)">
								<image class="big" :src="httpDomain+item2.iconImg" mode="aspectFit"></image>
							</view>
							<view class="txt">{{item2.name}}</view>
						</block>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/common/store';
import { get } from 'http';
	export default {
		data() {
			return {
				httpDomain:store.getters.GET_resourceURL,
				isEdit:false,
				appList:[
					// {
					// 	id:1,
					// 	title:'充电插座设备与订单',
					// 	arrays:[
					// 		{ico:'ico-device1',txt:'设备概览',path:'/device/cdcz/overview',homeShow:false},
					// 		{ico:'ico-dian1',txt:'已投设备',path:'/device/cdcz/list',homeShow:false},
					// 		{ico:'ico-cangku',txt:'设备仓库',path:'/device/cdcz/warehouse',homeShow:false},
					// 		{ico:'ico-order2',txt:'充电订单',path:'/order/cdcz/list',homeShow:false},
					// 		{ico:'ico-location',txt:'充电网点',path:'/place/general/place',homeShow:false},
					// 		{ico:'ico-moban',txt:'计费模板',path:'/device/cdcz/template',homeShow:false}
					// 	]
					// },
					// {
					// 	id:2,
					// 	title:'资金',
					// 	arrays:[
					// 		{ico:'ico-yue',txt:'商家余额',path:'/account/cash/cash',homeShow:false},
					// 		{ico:'ico-double',txt:'账单核对',path:'/account/check/list',homeShow:false},
					// 		{ico:'ico-zhang',txt:'账单明细',path:'/account/detail/list',homeShow:false},
					// 		{ico:'ico-bili',txt:'分成设置',path:'/account/divide/index'}
					// 	]
					// },
					// {
					// 	id:3,
					// 	title:'营销',
					// 	arrays:[
					// 		{ico:'ico-location',txt:'推荐网点',path:'/referrer/place/place',homeShow:false},
					// 		{ico:'ico-staff1',txt:'推荐代理',path:'/referrer/agent/list',homeShow:false},
					// 		{ico:'ico-card',txt:'电子卡产品',path:'/seling/card/cardSell'},
					// 		{ico:'ico-tuikuan2',txt:'电子卡退款',path:''},
					// 	]
					// },
					// {
					// 	id:4,
					// 	title:'工具',
					// 	arrays:[
					// 		{ico:'ico-tool',txt:'用户报修',path:'/tool/repairs/fault',homeShow:false},
					// 		{ico:'ico-gaojing',txt:'异常处理',path:'/tool/unusual/dingbell',homeShow:false}
					// 	]
					// }
				],
				
			}
		},
		onLoad() {
			this.getInfo();
		},
		methods: {
			getInfo(){
				
				const api = this.$request;
				api.post(api.url.myModelList,{},res=>{
					console.log(res)
					if(res.code==200){
						this.appList = [{
							id:1,
							title:'所有应用',
							arrays:res.body.items
						}]
					}
				})
			},
			btnChangeItem(id,state){
				const api = this.$request;
				api.post(api.url.myModelChange,{
					id:id,
					state:state
				},res=>{
					if(res.code==200){
						this.getInfo();
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color: #f6f6f6;
	}
	.module{
		width: 96%;
		background-color: white;
		margin: 20rpx auto 0;
		padding: 20rpx 0 40rpx;
		border-radius: 20rpx;
		.title{
			font-size: 30rpx;
			font-weight: 600;
			padding:0 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.btn{
				padding: 6rpx 26rpx;
				font-size: 24rpx;
				font-weight: 100rpx;
				background-color: #fc732f;
				color: white;
				border-radius: 10rpx;
			}
		}
		.content{
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			flex-wrap: wrap;
			.item{
				margin-top: 30rpx;
				width: 25%;
				text-align: center;
				color: #676767;
				font-size: 24rpx;
				.img-bg{
					width: 68rpx;
					height: 68rpx;
					margin: 0 auto 10rpx;
					border-radius: 50%;
					background-color: #fff6e7;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
					image.big{
						width: 48rpx;
						height: 48rpx;
					}
					image.small{
						width: 36rpx;
						height: 36rpx;
						border: 5rpx white solid;
						border-radius: 50%;
						position: absolute;
						top: -15rpx;
						right: -15rpx;
					}
				}
			}
		}
	}
</style>
